<!--
 * @Author: 熊志伟 xiongzhiwei
 * @Date: 2024-11-08 13:48:43
 * @LastEditors: 熊志伟 xiongzhiwei
 * @LastEditTime: 2024-11-14 15:08:40
 * @FilePath: \sr_system_manager_ui\src\views\login\components\forget.vue
 * @Description: 忘记密码
-->
<template>
  <el-form ref="forgetRef" :model="forgetForm" :rules="forgetRules" class="login-form">
    <div class="title">
      忘记密码
    </div>
    <el-form-item prop="email" style="margin-bottom: 24px;">
      <el-input v-model="forgetForm.email" type="text" size="large" auto-complete="off" clearable placeholder="请输入邮箱">
      </el-input>
    </el-form-item>
    <el-form-item prop="verifyCode" style="margin-bottom: 24px;">
      <div style="display: flex; justify-content: space-between; width: 322px;">
        <el-input v-model="forgetForm.verifyCode" size="large" auto-complete="off" placeholder="请输入验证码" clearable
          style="width: 200px;">
        </el-input>
        <el-button type="primary" size="large" plain style="width: 110px;height: 46px;" @click="getVerifyCode"
          :disabled="verifyCodeTime !== 60" :loading="sendCodeLoading">
          <template v-if="verifyCodeTime === 60">获取验证码</template>
          <template v-else>
            {{ verifyCodeTime }}s
          </template>
        </el-button>
      </div>
    </el-form-item>
    <el-form-item prop="password" style="margin-bottom: 24px;">
      <el-input v-model="forgetForm.password" type="password" size="large" auto-complete="off" placeholder="请输入新密码"
        show-password clearable>
      </el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword" style="margin-bottom: 32px;">
      <el-input v-model="forgetForm.confirmPassword" type="password" size="large" auto-complete="off"
        placeholder="请输入确认密码" show-password clearable>
      </el-input>
    </el-form-item>
    <el-form-item style="width: 100%; margin-bottom: 16px;">
      <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleSubmit">
        确定
      </el-button>
    </el-form-item>
    <el-form-item style="width: 100%;">
      <el-button size="large" link type="primary" style="width: 100%" @click.prevent="emits('login')">
        返回登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { sendForgetPasswordVerifyCode, forgetPasswordReq, getPubKey } from "@/api/login";
import { validatePassword, validEmail } from '@/utils/validate'
import { encrypt } from "@/utils/jsencrypt";
import { useRequest } from "vue-hooks-plus";
import { ElMessage } from 'element-plus'

const emits = defineEmits(['login'])

const { proxy } = getCurrentInstance();

const forgetForm = ref({
  email: "",
  password: "",
  confirmPassword: '',
  verifyCode: '',
});
const verifyCodeTime = ref(60)

const validateConfirmPassword = (value, cb) => {
  if (value !== forgetForm.value.password) {
    cb('两次密码输入不一致！')
    return
  }
  cb()
}

const forgetRules = {
  email: [{ trigger: "blur", validator: (rule, value, cb) => validEmail(value, cb) }],
  password: [{ trigger: "blur", validator: (rule, value, cb) => validatePassword(value, cb) }],
  confirmPassword: [{ trigger: "blur", validator: (rule, value, cb) => validateConfirmPassword(value, cb) }],
  verifyCode: [{ required: true, trigger: "blur", message: "请输入验证码" }],
};

const { run: sendCode, loading: sendCodeLoading } = useRequest(sendForgetPasswordVerifyCode, {
  manual: true
})

const { run: forgetPassword, loading } = useRequest(forgetPasswordReq, {
  manual: true,
  onSuccess: () => {
    ElMessage({
      message: '修改成功!',
      type: 'success',
      plain: true,
    })
    emits('login')
  },
});

// 获取公钥
const { runAsync: getPubKeyReq } = useRequest(getPubKey, {
  manual: true,
})

const getVerifyCode = () => {
  proxy.$refs.forgetRef?.validateField('email', (valid) => {
    if (valid) {
      sendCode({ email: forgetForm.value.email })
      const timeStop = setInterval(() => {
        verifyCodeTime.value--
        if (verifyCodeTime.value <= 0) {
          verifyCodeTime.value = 60
          clearInterval(timeStop)
        }
      }, 1000)
    }
  })
}

function handleSubmit() {
  proxy.$refs.forgetRef?.validate(async (valid) => {
    if (valid) {
      const { email, verifyCode } = forgetForm.value
      const pubKey = await getPubKeyReq()
      const password = encrypt(pubKey, forgetForm.value.password)
      forgetPassword({
        email,
        password,
        verifyCode,
      })

    }
  })
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 32px;
  margin-bottom: 24px;
  font-size: 24px;
  color: #000000;
  text-align: center;
}

.login-form {
  border-radius: 16px;
  background: #ffffff;
  padding: 24px 32px 12px;

  .el-input {
    height: 46px;
    width: 322px;
  }
}
</style>